<template>
  <el-dialog
    :title="title"
    width="1300px"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :inline="true" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="key" placeholder="项目名称/模块名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
       </el-form-item>
    </el-form>
    <div style="display: flex;">
    <div style="width:900px;height:550px;">
       <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          row-key="id"
          style="width: 100%;height:510px;">
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="versionName"
            header-align="center"
            align="center"
            label="版本号">
          </el-table-column>
          <el-table-column
            prop="fileUploadName"
            header-align="center"
            align="center"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            label="说明">
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            width="180"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            align="center"
            width="100"
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" size="small" type="danger">禁用</el-tag>
              <el-tag v-if="scope.row.status == 1" size="small">未发布</el-tag>
              <el-tag v-if="scope.row.status == 2" size="small">已发布</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button v-if="isAuth('project:update')" type="text" size="small" @click="publishVersionToRuntime(scope.row.id)">发布</el-button>
              <el-button v-if="isAuth('project:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
    <div style="width:400px;height:550px;">
        <div class="uploadfile" style="border:1px solid #ebeef5;margin:0 10px;width:360px;height:510px;padding:10px;">
          <el-form :model="uploadForm" :rules="uploadRule" ref="dataForm" label-width="80px">
            <el-form-item label="名称" prop="name">
              <el-input v-model="uploadForm.name" placeholder="版本名称"></el-input>
            </el-form-item>
            <el-form-item label="版本" prop="versionName">
              <el-input v-model="uploadForm.versionName" placeholder="版本号"></el-input>
            </el-form-item>
            <el-upload
              class="upload-demo"
              drag
              :action="this.$http.adornUrl(`/fileservice/uploadfile?token=${this.$cookie.get('token')}`)"
              :file-list="fileList"
              :before-upload="beforeUploadHandle"
              :on-success="successHandle"
             >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传 zip / rar 文件，且不超过500M</div>
            </el-upload>
          </el-form>
        </div>
        <div style="width:370px;text-align: right;margin-top: 10px;">
          <el-button type="primary" @click="versionUpdate()"><i class="el-icon-upload el-icon--left"></i>更新版本</el-button>
        </div>
    </div>
    </div>
  </el-dialog>
</template>
<style>
  .uploadfile .el-upload-dragger {
    width:335px;
  }
</style>
<script>
  export default {
    data () {
      return {
        visible: false,
        title:"",
        id:"",
        key:"",
        dataListLoading:false,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataList:[],
        type:'vue',
        uploadForm:{
            name:'',
            versionName:'',
            fileUploadName:'',
            fileSaveName:'',
            fileSize:''
        },
        uploadRule:{},
        fileList:[]
      }
    },
    methods: {
      init (object) {
        console.log(object)
        this.visible = true
        this.title = object.name
        this.id = object.id
        this.type = object.moduleType||object.framework
        this.getDataList()
      },
      publishVersionToRuntime(id){
        this.$confirm(`确定将[id=${id}]发布到生产环境中吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/publish/publishVersionToRuntime'),
            method: 'post',
            params: this.$http.adornParams({'id':id})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        // .catch(() => {})
      },
      versionUpdate(){
          if(this.fileList.length==0){
            this.$message.error('请先上传文件！')
            return
          }
          this.$http({
            url: this.$http.adornUrl(`/publish/save`),
           method: 'post',
           data: this.$http.adornData({
                'type':this.type,
                'objectId':this.id,
                'name': this.uploadForm.name,
                'versionName': this.uploadForm.versionName,
                'downloadUrl': this.fileList[0].response.url,
                'fileUploadName':this.uploadForm.fileUploadName,
                'fileSize':this.uploadForm.fileSize,
                'fileSaveName':this.uploadForm.fileSaveName,
                'status': 1,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.uploadForm.name='',
              this.uploadForm.versionName='',
              this.uploadForm.fileUploadName='',
              this.uploadForm.fileSaveName='',
              this.uploadForm.fileSize='',
              this.fileList=[]
              this.getDataList()
            }
          })
      },
      getDataList(){
        this.$http({
          url: this.$http.adornUrl(`/publish/list`),
          method: 'get',
          params: this.$http.adornParams({
              'type':this.type,
              'objectId':this.id,
              'page': this.pageIndex,
              'limit': this.pageSize,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
     // 每页数
     sizeChangeHandle (val) {
       this.pageSize = val
       this.pageIndex = 1
       this.getDataList()
     },
     // 当前页
     currentChangeHandle (val) {
       this.pageIndex = val
       this.getDataList()
     },
     // 多选
     selectionChangeHandle (val) {
       this.dataListSelections = val
     },
     // 新增 / 修改
     addOrUpdateHandle (id) {
       this.addOrUpdateVisible = true
       this.$nextTick(() => {
         this.$refs.addOrUpdate.init(id)
       })
     },

     // 上传成功
     successHandle (response, file, fileList) {
       if (response && response.code === 0) {
         this.fileList=[]
         this.fileList.push(file)
         this.uploadForm.fileUploadName=file.name
         this.uploadForm.fileSize = file.size
         this.uploadForm.fileSaveName=file.response.url
       } else {
         this.$message.error(response.msg)
       }
     },
     beforeUploadHandle (file) {
       console.log(file.type)
       if (file.type !== 'application/java-archive' && file.type !== 'application/x-gzip'  && file.type !== 'application/x-zip-compressed' && file.type !== '' ) {
         this.$message.error('只支持rar、zip、jar格式的图片！')
         return false
       }
     },
    }
  }
</script>
